<template>
    <div class="dialog" :style="dialogStyle">
        <div class="label">
            <!-- <div class="left-img"></div> -->
            <div class="title">选择</div>
        </div>
        <div class="timePick">
            <div class="start">
                <span class="childLabel">起始时间</span>
                <el-date-picker
                    v-model="startTime"
                    type="datetime"
                    placeholder="选择日期时间"
                ></el-date-picker>
            </div>
            <div class="end">
                <span class="childLabel">结束时间</span>
                <el-date-picker
                    v-model="endTime"
                    type="datetime"
                    placeholder="选择日期时间"
                ></el-date-picker>
            </div>
            <div class="quick">
                <span class="childLabel">快速选择</span>
                <el-button type="primary" @click="quickSelect(1)">过去1天</el-button>
                <el-button type="primary" @click="quickSelect(2)">过去2天</el-button>
                <el-button type="primary" @click="quickSelect(3)">过去3天</el-button>
                <el-button type="primary" @click="quickSelect(7)">过去7天</el-button>
            </div>
        </div>
        <div class="dataSource">
            <span class="label label1">数据源</span>
            <el-radio v-model="radio" label="站点实况">站点</el-radio>
            <el-radio v-model="radio" label="融合网格">融合网格</el-radio>
        </div>
        <div class="search"><el-button type="primary" @click="searchSelect">查询</el-button></div>
        <button class="close-btn" @click="close">&times;</button>
        <!-- 使用 × 符号作为关闭按钮 -->
    </div>
</template>

<script>
import PanelTitleleft from '@/components/ui/panelTitleleft.vue';
import {
    riverRainSelect,
    gullyRainSelect,
    reservoirRainSelect,
    dzPotentialPointsRainSelect,
} from '@/api/zhjcleft.js';

export default {
    name: 'SelectDialog',
    components: {
        PanelTitleleft,
    },
    props: {
        dialogStyle: {
            type: Object,
            default: () => ({
                position: 'fixed',
                top: '68%', // 设置弹窗顶部距离视口顶部的距离
                left: '38%', // 设置弹窗左边距离视口左边的距离
                transform: 'translateX(-50%)', // 水平居中
                zIndex: 500000, // 确保弹窗在最前面
            }),
        },
        zxhlShow: Boolean,
        shgShow: Boolean,
        ylskShow: Boolean,
        yhdShow: Boolean,
    },
    data() {
        return {
            startTime: new Date(2000, 10, 10, 10, 10),
            endTime: new Date(2024, 10, 11, 10, 10),
            radio: '站点实况',
            searchData: {},
            updateRainList: [],
        };
    },
    methods: {
        searchSelect() {
                this.searchData = {
                    startTime: this.formatDate(this.startTime),
                    endTime: this.formatDate(this.endTime),
                    type: this.radio,
                };
                riverRainSelect(this.searchData).then(res => {
                    this.updateRainList = res.data.areaRainSK;
                    this.updateData();
                    console.log(res.data.areaRainSK, '获取河道雨量选择数据');
                });
            this.startTime=new Date(2000, 10, 10, 10, 10);
            this.endTime=new Date(2024, 10, 11, 10, 10);
        },
        updateData() {
            console.log(this.updateRainList, '选择雨量数据');
            this.$emit('updateData', this.updateRainList);
        },
        quickSelect(val) {
            switch (val) {
                case 1:
                    this.startTime = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
                    this.endTime = new Date();
                    break;
                case 2:
                    this.startTime = new Date(new Date().getTime() - 48 * 60 * 60 * 1000);
                    this.endTime = new Date();
                case 3:
                    this.startTime = new Date(new Date().getTime() - 48 * 60 * 60 * 1000);
                    this.endTime = new Date();
                case 7:
                    this.startTime = new Date(new Date().getTime() - 48 * 60 * 60 * 1000);
                    this.endTime = new Date();
            }
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        close() {
            this.$emit('close');
        },
    },
};
</script>

<style scoped lang="scss">
.childLabel {
    display: inline-block;
    margin-left: 1rem;
    margin-right: 1rem;
}
.label {
    color: white;
    // border: 1px solid black;
    font-weight: bold;
    margin-right: 2rem;
    // border: 1px solid black;
    height: 10%;
    width: 100%;
    background-color: rgba(0, 35, 71, 0.6);
    display: flex;
    .left-img {
        width: 10%;
        height: 100%;
        border: 1px solid black;
    }
    .title {
    margin-left:1rem;
        line-height: 200%;
    }
}
.label1 {
    margin-left: 1rem;
    width: 10%;
    display: flex;
    background-color: transparent;
}
.dialog {
    border: 1px solid #ccc;
    // padding: 20px;
    width: 25vw;
    height: 30vh;
    color: white;
    font-size: 0.8rem;

    position: relative; /* 确保子元素的绝对定位是基于这个容器 */

    .timePick {
        width: 100%;
        height: 65%;
        // border: 1px solid black;
        background-color: rgba(0, 35, 71, 0.7);
        .start {
            // margin-top: 1rem;
            margin-bottom: 1rem;
            padding-top: 0.5rem;
        }
        .end {
            margin-bottom: 1rem;
        }
    }
    .dataSource {
        background-color: rgba(0, 35, 71, 0.7);
        display: flex;
    }
    .search {
        background-color: rgba(0, 35, 71, 0.7);
        height: 18%;
        display: flex;
        width: 100%;
        justify-content: center;
    }
}

.close-btn {
    position: absolute;
    top: 0px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
    color: white;
}

.close-btn:hover {
    color: #409eff; /* 鼠标悬停时改变颜色 */
}
::v-deep .el-button--primary {
    height: 70%;
    background-color: #3c6484;
}

::v-deep .el-radio {
    color: white;
}
::v-deep .el-input__inner {
    background-color: #3c6484;
    color: white;
}
</style>
